<!DOCTYPE html>
<html ng-app="app">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" href="css/reset.css">
		<style type="text/css">
			html {
				width: 100%;
				height: 100%;
				overflow-x: hidden;
			}
			body {
				text-align: left;
				width: 100%;
				-webkit-tap-highlight-color: rgba(0,0,0,.05);
				-webkit-touch-callout: none;
				-webkit-user-select: none;
				background: #e9dfc7;
				overflow: hidden;
			}
			.m-read-content {
				font-size: 14px;
				color: #555;
				line-height: 31px;
				padding: 15px;
			}
			.m-read-content h4 {
				font-size: 20px;
				color: #736357;
				border-bottom: solid 1px #736357;
				margin: 0 0 1em 0;
				letter-spacing: 2px;
			}

			.m-read-content p {
				text-indent: 2em;
				margin: 0.5em 0;
				text-align: justify;
				letter-spacing: 0px;
				line-height: 24px;
			}
			.artical-action-top {
				position: fixed;
				top: 0px;
				height: 30%;
				width: 100%;
				z-index: 90;
			}
			.artical-action-mid {
				position: fixed;
				top: 30%;
				height: 40%;
				width: 100%;
				z-index: 10002;
			}
			.artical-action-bottom {
				position: fixed;
				bottom: 0px;
				height: 30%;
				width: 100%;
				z-index: 90;
			}
			.m-tool-bar {
				text-align: center;
				width: 100%;
				height: 40px;
				position: fixed;
				bottom: 0px;
				z-index: 10000;
			}
			.m-tool-bar-mask {
				text-align: center;
				width: 100%;
				height: 40px;
				position: fixed;
				bottom: 0px;
				z-index: 9999;
				background: #000;
				opacity: .9;
			}
			.menu-mask {
				width: 100%;
				height: 100%;
				position: fixed;
				z-index: 9999;
				background: #000;
				opacity: .8;
				top: 0px
			}
			.m-tool-button {
				padding: 5px 15px;
				margin-top: 7px;
				border: 1px #fff solid;
				background: transparent;
				color: #fff
			}
			.top-nav {
				position: fixed;
				top: 0px;
				height: 50px;
				background: #000;
				width: 100%;
				opacity: 1;
				z-index: 10004
			}
			.top-nav-warp {
				position: relative;
				max-width: 900px;
				margin: 0 auto;
			}
			.top-nav-pannel-bk {
				position: fixed;
				bottom: 70px;
				height: 135px;
				background: #000;
				width: 100%;
				color: #fff;
				opacity: 0.9;
				z-index: 10003
			}
			.top-nav-pannel {
				position: fixed;
				bottom: 70px;
				height: 135px;
				background: none;
				width: 100%;
				color: #fff;
				z-index: 10004
			}
			.top-nav-pannel button {
				background: none;
				border: 1px #8c8c8c solid;
				padding: 5px 40px;
				color: #fff;
				display: inline-block;
				border-radius: 16px;
			}
			.top-nav-pannel .bk-container {
				position: relative;
				height: 30px;
				width: 30px;
				background: #fff;
				border-radius: 15px;
				display: inline-block;
				vertical-align: -14px;
				margin-left: 10px;
			}
			.top-nav-pannel .bk-container-current {
				position: absolute;
				height: 32px;
				width: 32px;
				border-radius: 16px;
				display: inline-block;
				vertical-align: -14px;
				margin-left: 10px;
				border: 1px #ff7800 solid;
				top: -2px;
				left: -12px;
			}
			.top-nav-pannel .bk-container span {
				position: absolute;
				top: 32px;
				left: -8px;
				display: block;
				font-size: 12px;
				width: 40px;
			}
			.bottom-nav-bk {
				position: fixed;
				bottom: 0px;
				height: 70px;
				background: #000;
				width: 100%;
				opacity: .9;
				z-index: 10004
			}

			.bottom-nav {
				position: fixed;
				bottom: 0px;
				height: 70px;
				background: none;
				width: 100%;
				opacity: 1;
				z-index: 10004;
				margin: 0 auto;
				text-align: center
			}
			.bottom-nav .item {
				display: inline-block;
				width: 32%;
				color: #fff;
				text-align: center;
				margin: 0 auto;
			}

			.m-button-bar {
				text-align: center;
				font-size: 14px;
				padding: 5px;
				margin: 10px;
				max-width: 900px;
				margin: 0 auto;
				width: 70%
			}
			.m-button-bar button {
				background: none;
				border: 1px #000 solid;
				padding: 5px 10px;
			}
			.nav-title {
				position: absolute;
				top: 16px;
				left: 42px;
				color: #d5d5d6
			}
			.top-nav button {
				width: 65px;
				font-size: 12px;
				background: none;
				border: 1px #d5d5d6 solid;
				padding: 5px 10px;
				color: #d5d5d6;
				position: absolute;
				top: 11px;
				border-radius: 16px 0 0 16px;
				opacity: 0.9
			}

			.child-mod {
				padding: 5px 10px;
				margin-top: 15px
			}
			.child-mod span {
				display: inline-block;
				padding-right: 20px;
				padding-left: 10px;
			}
			.large-font p {
				font-size: 18px
			}
			.small-font p {
				font-size: 14px
			}
			.menu-container {
				height: 60%;
				position: fixed;
				bottom: 0px;
				width: 100%;
				overflow: scroll;
				background: #fff;
				display: block;
				z-index: 19999
			}
			.chapter-list {
				text-align: left;
			}
			.chapter-list li {
				padding: 15px;
			}
			.chapter-list li:nth-child(2n-1) {
				background-color: #ededed
			}
			.chapter-list li:nth-child(2n) {
				background-color: #e6e6e6
			}
			.chapter-list .free {
				float: right;
			}
			.free {
				color: #459c3a;
			}
			.loading {
				position: fixed;
				text-align: center;
				width: 100%;
				top: 40%;
				color: #fff;
				z-index: 199999
			}
			.u-tab {
				position: relative;
				height: 34px;
				margin: 10px auto;
				line-height: 34px;
				border-radius: 8px;
				border: 1px solid #858382;
				font-size: 13px;
				background: #000;
				opacity: 0.9;
			}
			.u-tab li {
				display: inline-block;
				width: 49%;
				font-size: 13px;
				border-right: 1px solid #858382;
				-webkit-box-sizing: border-box;
				text-align: center;
				color: #fff;
			}
			.mask {
				position: fixed;
				width: 100%;
				height: 100%;
				z-index: 12000;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				opacity: .4;
				background: #000;
			}

			.buy-mask {
				height: 100%;
				width: 100%;
				position: fixed;
				top: 0px;
				text-align: center;
				margin: 0 auto;
				display: none;
				z-index: 10001;
				background: #e9dfc7;
			}
			.icon-back {
				position: absolute;
				top: 14px;
				left: 10px;
				width: 23px;
				height: 23px;
				background: url();
				background-size: contain;
			}
			.icon-text {
				position: absolute;
				top: 25px;
				font-size: 10px;
			}
			.icon-menu, .icon-ft, .icon-night, .icon-day {
				position: absolute;
				top: 3px;
				left: 2px;
				width: 18px;
				height: 13px;
				background: url();
				background-size: contain;
			}
			.icon-night, .icon-day, .icon-ft {
				left: 1px;
			}
			.icon-ft {
				width: 20px;
				height: 13px;
				background: url();
				background-size: contain;
			}

			.current .icon-ft {
				top: 2px;
				left: 0px;
				width: 22px;
				height: 15px;
				background: url();
				background-size: contain;
			}

			.icon-day {
				width: 19px;
				height: 18px;
				background: url();
				background-size: contain;
			}

			.icon-night {
				left: 4px;
				width: 16px;
				height: 16px;
				background: url();
				background-size: contain;
			}

			.item-warp {
				width: 26px;
				margin: 0 auto;
				position: relative;
			}
			.loading-icon {
				margin: 0 auto;
				margin-top: 50%;
				background: url();
				width: 20px;
				height: 20px;
			}
			.loading-mask {
				text-align: center;
				margin: 0 auto;
				width: 100%;
				height: 100%;
				background: #000;
				opacity: 0.1;
				position: fixed;
				top: 0px;
			}

			.buy-container {
				width: 100%;
				position: fixed;
				top: 20%;
				text-align: center;
				margin: 0 auto;
				display: none;
				z-index: 10003
			}
			.buy-container h3 {
				font-weight: normal;
				line-height: 30px;
				font-family: microsoft yahei, arial, helvetica, sans-serif
			}
			.buy-container h2 {
				padding-bottom: 80px;
			}

			.buy-container button {
				font-family: microsoft yahei, arial, helvetica, sans-serif;
				font-size: 14px;
				height: 40px;
				line-height: 40px;
				border: none;
				color: #fff;
				padding: 0 10px;
				width: 160px;
				background: #4a90b1;
				margin-top: 10px;
			}

			.m-read-content {
				min-height: 300px;
				max-width: 900px;
				margin: 0 auto;
			}

			.buy-popup-frame {
				display: none;
				position: fixed;
				bottom: 0px;;
				left: 0px;
				width: 100%;
				height: 266px;
				z-index: 39999
			}
		</style>
	</head>
	<body>
		<div class="loading-mask" id="init_loading">
			<div class="loading-icon"></div>
		</div>
		<div class="container" id="root">
			<div id="fiction_chapter_title"></div>
			<div class="m-artical-action">
				<div class="artical-action-mid" id="action_mid"></div>
			</div>
			<div id="fiction_container" class="m-read-content"></div>
			<div class="top-nav" id="top-nav" style="display:none">
				<div class="top-nav-warp">
					<div class="icon-back"></div>
					<div class="nav-title" id="nav_title">
						返回书架
					</div>
				</div>
			</div>
			<div class="top-nav-pannel-bk font-container" id="font-container" style="display:none"></div>
			<div class="top-nav-pannel font-container" id="font-container" style="display:none">
				<div class="child-mod">
					<span>字号</span>
					<button id="large-font" class="spe-button">
						大
					</button>
					<button id="small-font" class="spe-button" style="margin-left:10px;">
						小
					</button>
				</div>
				<div class="child-mod" id="bk-container">
					<span>背景</span>
				</div>
			</div>
			<div class="m-button-bar" id="bottom_tool_bar" style="display:none;padding-bottom:70px;">
				<ul class="u-tab" id="bottom_tool_bar_ul">
					<li id="prev_button" >
						上一章
					</li>
					<li id="next_button" style="border-right:none">
						下一章
					</li>
				</ul>
			</div>

			<div class="bottom-nav-bk bottom_nav" style="display:none"></div>

			<div class="bottom-nav bottom_nav" style="display:none">
				<div class="item menu-button" id="menu_button">
					<div class="item-warp">
						<div class="icon-menu"></div>
						<div class="icon-text">
							目录
						</div>
					</div>
				</div>
				<div class="item" id="font-button">
					<div class="item-warp">
						<div class="icon-ft"></div>
						<div class="icon-text">
							字体
						</div>
					</div>
				</div>
				<div class="item" id="night-button">
					<div class="item-warp" style="display:none" id="day_icon">
						<div class="icon-day"></div>
						<div class="icon-text">
							白天
						</div>
					</div>
					<div class="item-warp" id="night_icon">
						<div class="icon-night"></div>
						<div class="icon-text">
							夜间
						</div>
					</div>
				</div>
			</div>

			<div class="loading" id="loading" style="display:none">
				正在加载中...
			</div>
			<div class="m-tool-bar-mask" id="tool_bar_mask" style="display:none"></div>
			<ul class="menu-container chapter-list" id="menu_container" style="display:none"></ul>
			<div class="menu-mask" id="menu_mask" style="display:none"></div>
			<div class="mask" id="mask" style="display:none"></div>
		</div>
		<script src="lib/zepto.min.js"></script>
		<script>
			window.jQuery = $;
		</script>
		<script src="js/jquery.base64.js"></script>
		<script src="js/jquery.jsonp.js"></script>

		<script>
			(function() {'use strict';
				var Util = (function() {
					var prefix = 'ficiton_reader_';
					var StorageGetter = function(key) {
						return localStorage.getItem(prefix + key);
					}
					var StorageSetter = function(key, val) {
						return localStorage.setItem(prefix + key, val);
					}
					//数据解密
					function getBSONP(url, callback) {
						return $.jsonp({
							url : url,
							cache : true,
							callback : "duokan_fiction_chapter",
							success : function(result) {
								var data = $.base64.decode(result);
								var json = decodeURIComponent(escape(data));
								callback(json);
							}
						});

					};

					return {
						getBSONP : getBSONP,
						StorageGetter : StorageGetter,
						StorageSetter : StorageSetter
					}
				})();

				//获得阅读器内容的方法
				function ReaderModel(id_, cid_, onChange_) {
					var Title = "";

					var Fiction_id = id_;

					var Chapter_id = cid_;

					if (Util.StorageGetter(Fiction_id + 'last_chapter')) {
						Chapter_id = Util.StorageGetter(Fiction_id + 'last_chapter');
					}

					if (!Chapter_id) {
						Chapter_id = 1;
					}
					var Chapters = [];

					var init = function() {
						getFictionInfoPromise.then(function(d) {
							gotoChapter(Chapter_id);
						});
						/*
						 getFictionInfo(function() {
						 gotoChapter(Chapter_id);
						 });
						 */
					}
					var gotoChapter = function(chapter_id) {
						Chapter_id = chapter_id;
						getCurChapterContent();
					};

					//获得当前章节内容
					var getCurChapterContent = function() {
						$.get("data/data" + Chapter_id + ".json", function(data) {

							if (data.result == 0) {
								var url = data.jsonp;
								Util.getBSONP(url, function(data) {
									$('#init_loading').hide();
									onChange_ && onChange_(data);
								});
							} else {

							}
						}, 'json');
						return;

					};

					var getFictionInfoPromise = new Promise(function(resolve, reject) {
						$.get("data/chapter.json", function(data) {
							if (data.result == 0) {
								Title = data.title;
								$('#nav_title').html('返回书架');
								window.ChaptersData = data.chapters;
								window.chapter_data = data.chapters;
								for (var i = 0; i < data.chapters.length; i++) {
									Chapters.push({
										"chapter_id" : data.chapters[i].chapter_id,
										"title" : data.chapters[i].title
									})
								}
								resolve(Chapters);
							} else {
								reject(data);
							}
						}, 'json');
					});

					/*
					var getFictionInfo = function(callback) {
					$.get("/data/chapter.json", function(data) {
					Title = data.title;
					$('#nav_title').html('返回书架');
					window.ChaptersData = data.chapters;
					window.chapter_data = data.chapters;
					for (var i = 0; i < data.chapters.length; i++) {
					Chapters.push({
					"chapter_id" : data.chapters[i].chapter_id,
					"title" : data.chapters[i].title
					})
					}

					callback && callback();
					}, 'json');
					};
					*/
					//获得上一章内容
					var prevChapter = function() {
						Chapter_id = parseInt(Chapter_id);
						if (Chapter_id == 0) {
							return
						}
						var cid = Chapter_id - 1;
						gotoChapter(cid);
						Util.StorageSetter(Fiction_id + 'last_chapter', Chapter_id);
					};

					//获得下一章内容
					var nextChapter = function() {
						Chapter_id = parseInt(Chapter_id);
						if (Chapter_id == Chapters.length - 1) {
							return
						}
						var cid = Chapter_id + 1;
						gotoChapter(cid);
						Util.StorageSetter(Fiction_id + 'last_chapter', Chapter_id);
					};

					return {
						init : init,
						go : gotoChapter,
						prev : prevChapter,
						next : nextChapter,
						getChapter_id : function() {
							return Chapter_id;
						}
					};
				}

				//画一下基本的展示框架
				function RenderBaseFrame(container) {
					function parseChapterData(jsonData) {
						var jsonObj = JSON.parse(jsonData);
						var html = "<h4>" + jsonObj.t + "</h4>";
						for (var i = 0; i < jsonObj.p.length; i++) {
							html += "<p>" + jsonObj.p[i] + "</p>";
						}
						return html;
					}

					return function(data) {
						container.html(parseChapterData(data));
					};
				}

				function main() {
					// 获取fiction_id 和 chapter_id
					var RootContainer = $('#fiction_container');

					var Fiction_id, Chapter_id;

					// 绑定事件
					var ScrollLock = false;
					var Doc = document;
					var Screen = Doc.body;
					var Win = $(window);

					//是否是夜间模式
					var NightMode = false;

					//初始化的字体大小
					var InitFontSize;

					//dom节点的缓存
					var Dom = {
						bottom_tool_bar : $('#bottom_tool_bar'),
						nav_title : $('#nav_title'),
						bk_container : $('#bk-container'),
						night_button : $('#night-button'),
						next_button : $('#next_button'),
						prev_button : $('#prev_button'),
						back_button : $('#back_button'),
						top_nav : $('#top-nav'),
						bottom_nav : $('.bottom_nav')
					}

					// 程序初始化
					var readerUIFrame = RenderBaseFrame(RootContainer);

					//获得章节数据，展示
					var readerModel = ReaderModel(Fiction_id || 13359, Chapter_id, function(data) {
						readerUIFrame(data);
						Dom.bottom_tool_bar.show();
						setTimeout(function() {
							ScrollLock = false;
							Screen.scrollTop = 0;
						}, 20);
					});

					//阅读器数据内容展示
					readerModel.init();

					//从缓存中读取的信息进行展示
					var ModuleFontSwitch = (function() {
						//字体和背景的颜色表
						var colorArr = [{
							value : '#f7eee5',
							name : '米白',
							font : ''
						}, {
							value : '#e9dfc7',
							name : '纸张',
							font : '',
							id : "font_normal"
						}, {
							value : '#a4a4a4',
							name : '浅灰',
							font : ''
						}, {
							value : '#cdefce',
							name : '护眼',
							font : ''
						}, {
							value : '#283548',
							name : '灰蓝',
							font : '#7685a2',
							bottomcolor : '#fff'
						}, {
							value : '#0f1410',
							name : '夜间',
							font : '#4e534f',
							bottomcolor : 'rgba(255,255,255,0.7)',
							id : "font_night"
						}];

						var tool_bar = Util.StorageGetter('toolbar_background_color');
						var bottomcolor = Util.StorageGetter('bottom_color');
						var color = Util.StorageGetter('background_color');
						var font = Util.StorageGetter('font_color');
						var bkCurColor = Util.StorageGetter('background_color');
						var fontColor = Util.StorageGetter('font_color');

						for (var i = 0; i < colorArr.length; i++) {
							var display = 'none';
							if (bkCurColor == colorArr[i].value) {
								display = '';
							}
							Dom.bk_container.append('<div class="bk-container" id="' + colorArr[i].id + '" data-font="' + colorArr[i].font + '"  data-bottomcolor="' + colorArr[i].bottomcolor + '" data-color="' + colorArr[i].value + '" style="background-color:' + colorArr[i].value + '"><div class="bk-container-current" style="display:' + display + '"></div><span style="display:none">' + colorArr[i].name + '</span></div>');
						}

						RootContainer.css('min-height', $(window).height() - 100);

						if (bottomcolor) {
							$('#bottom_tool_bar_ul').find('li').css('color', bottomcolor);
						}

						if (color) {
							$('body').css('background-color', color);
						}

						if (font) {
							$('.m-read-content').css('color', font);
						}

						//夜间模式
						if (fontColor == '#4e534f') {
							NightMode = true;
							$('#day_icon').show();
							$('#night_icon').hide();
							$('#bottom_tool_bar_ul').css('opacity', '0.6');
						}

						//字体设置信息
						InitFontSize = Util.StorageGetter('font_size');
						InitFontSize = parseInt(InitFontSize);
						if (!InitFontSize) {
							InitFontSize = 18;
						}

						RootContainer.css('font-size', InitFontSize);

					})();

					

					//页面中的零散交互事件处理
					var EventHandler = (function() {
						//夜间和白天模式的转化
						Dom.night_button.click(function() {
							if (NightMode) {
								$('#day_icon').hide();
								$('#night_icon').show();
								$('#font_normal').trigger('click');
								NightMode = false;
							} else {
								$('#day_icon').show();
								$('#night_icon').hide();
								$('#font_night').trigger('click');
								NightMode = true;
							}

						});

						//字体和背景颜色的信息设置
						Dom.bk_container.delegate('.bk-container', 'click', function() {
							var color = $(this).data('color');
							var font = $(this).data('font');
							var bottomcolor = $(this).data('bottomcolor');
							var tool_bar = font;
							Dom.bk_container.find('.bk-container-current').hide();
							$(this).find('.bk-container-current').show();
							if (!font) {
								font = '#000';
							}
							if (!tool_bar) {
								tool_bar = '#fbfcfc';
							}

							if (bottomcolor && bottomcolor != "undefined") {
								$('#bottom_tool_bar_ul').find('li').css('color', bottomcolor);
							} else {
								$('#bottom_tool_bar_ul').find('li').css('color', '#a9a9a9');
							}
							$('body').css('background-color', color);
							$('.m-read-content').css('color', font);

							Util.StorageSetter('toolbar_background_color', tool_bar);
							Util.StorageSetter('bottom_color', bottomcolor);
							Util.StorageSetter('background_color', color);
							Util.StorageSetter('font_color', font);

							var fontColor = Util.StorageGetter('font_color');
							//夜间模式
							if (fontColor == '#4e534f') {
								NightMode = true;
								$('#day_icon').show();
								$('#night_icon').hide();
								$('#bottom_tool_bar_ul').css('opacity', '0.6');
							} else {
								NightMode = false;
								$('#day_icon').hide();
								$('#night_icon').show();
								$('#bottom_tool_bar_ul').css('opacity', '0.9');
							}
						});

						//按钮的多态样式效果
						$('.spe-button').on('touchstart', function() {
							$(this).css('background', 'rgba(255,255,255,0.3)');
						}).on('touchmove', function() {
							$(this).css('background', 'none');
						}).on('touchend', function() {
							$(this).css('background', 'none');
						});

						//字体放大
						$('#large-font').click(function() {
							if (InitFontSize > 20) {
								return;
							}
							InitFontSize += 1;
							Util.StorageSetter('font_size', InitFontSize);
							RootContainer.css('font-size', InitFontSize);
						});

						//字体缩小
						$('#small-font').click(function() {
							if (InitFontSize < 12) {
								return;
							}
							InitFontSize -= 1;
							Util.StorageSetter('font_size', InitFontSize);
							RootContainer.css('font-size', InitFontSize);
						});

						var font_container = $('.font-container');
						var font_button = $('#font-button');
						var menu_container = $('#menu_container');

						font_button.click(function() {
							if (font_container.css('display') == 'none') {
								font_container.show();
								font_button.addClass('current');
							} else {
								font_container.hide();
								font_button.removeClass('current');

							}
						});

						RootContainer.click(function() {
							font_container.hide();
							font_button.removeClass('current');
						});

						//对屏幕的滚动监控
						Win.scroll(function() {
							Dom.top_nav.hide();
							Dom.bottom_nav.hide();
							font_container.hide();
							font_button.removeClass('current');
						});

						//章节翻页
						Dom.next_button.click(function() {
							readerModel.next();
						});

						Dom.prev_button.click(function() {
							readerModel.prev();
						});

						//返回上级页面
						Dom.back_button.click(function() {
							if (Fiction_id) {
								location.href = '/book/' + Fiction_id;
							}
						});

						//返回首页
						Dom.nav_title.click(function() {
							location.href = '/';
						});

						$('.icon-back').click(function() {
							location.href = '/';
						});

						$('#menu_button').click(function() {
							location.href = '#';
						});

						//屏幕中央事件
						$('#action_mid').click(function() {
							if (Dom.top_nav.css('display') == 'none') {
								Dom.bottom_nav.show();
								Dom.top_nav.show();
							} else {
								Dom.bottom_nav.hide();
								Dom.top_nav.hide();
								font_container.hide();
								font_button.removeClass('current');
							}

						});
					})();
				}

				return main();
			})();
		</script>
	</body>
</html>